<template>
	<custom-layout custom-class="custom-layout">
		<!-- 轮播图 -->
		<wd-swiper :list="swiperList" customClass="swiper-class" />
		<!-- 公告栏 -->
		<wd-notice-bar :text="noticeList" prefix="warn-bold" type="info" />
		<!-- 功能栏 -->
		<wd-grid :column="5" :gutter="20" square custom-class="grid-class">
			<wd-grid-item use-slot v-for="_ in gridList" :key="_.img" custom-class="grid-item-class">
				 <image class="grid-img" :src="_.img" />
				 <text>{{_.text}}</text>
			</wd-grid-item>
			
		</wd-grid>
		<!-- 案例列表 -->
		<view class="case-list">
			<view class="top-title">推荐案例</view>
			<view class="list">
				<view class="case" v-for="_ in hotCase" :key="_.id" @click="handleJumpCaseDetails(_.id)">
					<image class="cover" :src="_.coverImage?.[0].url" mode="aspectFill" />
					
					<view class="description">
						<view class="property-name">{{_.title}} | {{dictionaryStore.analysis('case_style',_.style)}}</view>
						<view class="property-des">
							<image src="~@/static/image/index-grid/estate.png" mode="aspectFit" class="description-img"></image>
							<view class="info">{{propertyList.find(item=>item.id===_.propertyName)?.name}} | {{dictionaryStore.analysis('area',_.houseArea)}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 新用户福利 -->
		<wd-curtain :value="showNewUserBenefits" :width="250"
			src="https://ghj-file.oss-cn-shenzhen.aliyuncs.com/ef211f1cc43d86c690d3c96ef303606716ff1c4ad8d320a2e9bc357c98d04562.png"
			close-on-click-modal @click="handleClickBenefits" />
	</custom-layout>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		getSwiperList,
		getNotice,
		getHotCase,
		getPropertyList,
		getBenefits
	} from '@/api/index/index.js'
	import {
		useDictionaryStore,
		useUserStore
	} from '@/store/index.js'
	const gridList = ref([
		{img:'/static/image/index-grid/renovated.png',
		 text:'房屋翻新'},
		{img:'/static/image/index-grid/transformation.png',
		 text:'局部改造'},
		{img:'/static/image/index-grid/customization.png',
		 text:'全屋定制'},
		{img:'/static/image/index-grid/purchase.png',
		 text:'家具购买'},
		{img:'/static/image/index-grid/share.png',
		 text:'分享赚佣'},
		
	])
	// 字典仓库
	const dictionaryStore = useDictionaryStore()
	// 用户仓库
	const userStore = useUserStore()
	// 轮播图列表
	const swiperList = ref([])
	// 通知公告
	const noticeList = ref([])
	// 热门案例
	const hotCase = ref([])
	// 处理获取热门案例
	const handleGetHotCase = () => {
		getHotCase().then((data) => {
			hotCase.value = data
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
		})
	}
	// 处理获取轮播图列表
	const handleGetSwiperList = () => {
		getSwiperList().then((data) => {
			swiperList.value = data.map((obj,index) => {
				return obj.fileUrl
			}).join(",").split(",")
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
		})
	}
	// 处理获取公告通知列表
	const handleGetNoticeList = () => {
		getNotice().then((data) => {
			noticeList.value = data.map((obj,index) => {
				return obj.message
			}).join(",").split(",")
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
		})
	}
	// 楼盘列表
	const propertyList = ref([])
	// 获取楼盘列表
	const handleGetPropertyList = () => {
		const params = {
			pageSize: -1
		}
		getPropertyList(params).then((data) => {
			propertyList.value = data.list
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
		})
	}
	// 获取数据
	const getData = () => {
		// if (userStore.userId) {
			handleGetSwiperList()
			handleGetNoticeList()
			handleGetHotCase()
			handleGetPropertyList()
		// }
	}
	watch(() => userStore.userId, () => {
		getData()
	}, {
		immediate: true
	})
	onShow(() => {
		getData()
	})
	// 处理跳转案例详情
	const handleJumpCaseDetails = (id) => {
		uni.navigateTo({
			url: `/pages/case/details/index?id=${id}`
		})
	}
	// 显示新用户福利
	const showNewUserBenefits = ref(false)
	// 监听是否是新用户
	watch(() => userStore.newReceiveStatus, (newValue) => {
		if (newValue === '0' || !userStore.userId) {
			showNewUserBenefits.value = true
		} else {
			showNewUserBenefits.value = false
		}
	}, {
		immediate: true
	})
	// 处理点击福利
	const handleClickBenefits = async () => {
		if (!userStore.userId) {
			const res = await userStore.wxLogin()
			if(!res.nickname) {
				uni.reLaunch({
					url:'/pages/login/index'
				})
				
			} else {
				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration:2000
				})
			}
			
			
		} else {
			const params = {
				wxUserId: userStore.userId
			}
			getBenefits(params).then(() => {
				uni.showToast({
					title: '领取成功',
					icon: 'success'
				})
			}).catch(() => {
				uni.showToast({
					title: '领取失败',
					icon: 'error'
				})
			})
		}
	
	}
</script>

<style lang="scss" scoped>
	// 自定义布局
	:deep(.custom-layout) {
		background: #F8F8F8;
	}

	// 轮播图样式
	:deep(.swiper-class) {
		.wd-swiper__track {
			border-radius: 0;
		}
		padding: 20rpx;
	}
	

	// 功能栏样式
	:deep(.grid-class) {
		margin: 32rpx 0 0 0;
		padding-bottom: 0 !important;
		
		
	}
	:deep(.grid-item-class)>.wd-grid-item__content {
		background-color: #f8f8f8;
	}
	
	.grid-img {
		width: 70%;
		height: 40px;
		margin: 0 auto 8rpx;
	}

	// 案例列表
	.case-list {
		margin: 0 32rpx;

		.top-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 16rpx;
		}

		.list {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.case {
				width: 100%;
				margin: 0 0 32rpx  0;
				border-radius: 20rpx;
				background: #FFFFFF;
				overflow: hidden;
				display: flex;

				.cover {
					width: 100%;
					height: 200rpx;
					flex: 1;
					border-radius: 20rpx;
				}	

				.description {
					font-size: 24rpx;
					color: #666666;
					margin: 20rpx;
					width: 60%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.property-name {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						
					}
					.property-des {
						.description-img {
							width: 56rpx;
							height: 28rpx;
						}
						.info {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					
				}
			}
		}
	}
</style>